.ant-list {
  background-color: #fff;
  position: relative;
  padding: 0 20px;
  padding-bottom: 30px;

  // min-height: 850px;
  .ant-list-header {
    border: 0;
    margin-bottom: 30px;
  }

  //整个item
  .ant-list-item {
    height: 200px;
    margin: 10px 0;
    width: 100%;
    transition: 0.5s;
    border-bottom: 0;

    //item的左侧 图片部分
    .ant-list-item-meta {
      display: inline-block;
      flex: none;
      cursor: pointer;

      .ant-list-item-meta-avatar {
        overflow: hidden;
        transition: 0.2s;
      }
    }

    //item的右边
    .list-item-content {
      display: inline-block;
      width: 60%;
      height: 100%;
      padding-left: 10px;

      .item-title {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: flex;
        align-items: center;
        margin: 10px 0;

        .item-category {
          color: #1890ff;
          height: 24px;
          border: 1px solid #1890ff;
          font-size: 12px;
          padding: 2px 6px;
          margin-right: 10px;
        }

        .item-title-h2 {
          font-weight: 700;
          margin: 0;

        }
      }

      .item-tags {
        display: flex;
        // justify-content: start;
        margin-bottom: 15px;

        .item-tag {
          padding: 2px 10px;
          border: 1px solid #f5f7fa;
          margin-right: 10px;
          background-color: #f5f7fa;
          cursor: pointer;

          i {
            color: #1890ff;
            margin-right: 5px;
          }

          &:hover {
            background-color: #1890ff;
            color: #fff;

            i {
              color: #fff;
            }
          }
        }
      }

      .item-brief {
        color: #888888;
        line-height: 24px;
        margin-bottom: 15px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .item-detail {
        display: flex;
        align-items: center;

        span {
          color: #888888;
        }

        .item-detail-line {
          display: inline-block;
          margin: 0 10px;
          height: 15px;
          width: 1px;
          background-color: #f0f0f0;
        }
      }

    }

    &:hover {
      background-color: #f5f7fa;

      .ant-list-item-meta-avatar {
        transform: scale(1.05);
      }
    }
  }
  //加入动画
  .item-appear,.item-enter{
    opacity: 0;
    transform: scale(0);
  }
  .item-appear-active,.item-enter-active{
    opacity: 1;
    transform: scale(100%);
    transition: all 500ms;
  }
}

.example {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  height: 80%;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 20px 0;
  margin-bottom: 20px;
  padding: 30px 50px;
  background: rgba(0, 0, 0, 0.01);
  border-radius: 4px;
}

.no-more {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  padding: 30px 0;

  .no-more-text {
    color: #888888;
    margin: 0 8px;
  }

  .no-more-hr {
    height: 0.8px;
    width: 20%;
    display: inline-block;
    background-color: #f0f0f0;
  }
}
@media screen and (max-width: 767px) {
  .article-list {
    width: 100%;
    
    word-wrap: break-word;
    .ant-list-header{
      margin: 0;
      padding: 0;
    }
    .ant-list-item{
      padding: 0;
      margin: 0;
      font-size: 12px;
      .ant-list-item-meta{
        width: 40%;
        height: 80%;
        .ant-list-item-meta-avatar{
          width: 100%;
          height: 100%;
        }
        img{
          width: 100%;
        }
      }
      .list-item-content{
        width: 60%;
        height: 80%;
        .item-title{
          margin-top: 0;
          .item-title-h2{
            table-layout:fixed; word-break:break-all; overflow:hidden; 
          }
        }
        .item-tags{
          flex-wrap: wrap;
        }
        .item-category{
          display: none;
        }
        .item-detail{
          & .item-detail-line:nth-of-type(1){
            display: none!important;
          }
        }
        .item-detail-good{
          display: none;
        }
      }
    }
    img{
      height: 100%;
    }
  }
}